<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="展会名称：" prop="miceId">
                  <Select
                    v-model="conditions.miceId"
                    clearable
                    @on-change="changeStatus($event, 'miceId')"
                  >
                    <Option
                      v-for="item in mices"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="沟通状态：">
                  <Select
                    v-model="conditions.status"
                    clearable
                    @on-change="changeStatus($event, 'status')"
                  >
                    <Option
                      v-for="item in statusList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="业务员：">
                  <Select
                    v-model="conditions.sales"
                    clearable
                    @on-change="changeStatus($event, 'sales')"
                  >
                    <Option
                      v-for="item in userList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="addUser">添加展商</Button>
        <Button icon="ios-download-outline" @click="exportData">导出</Button>
      </div>
    </div>
    <Table :columns="columns1" border :height="tableHeight" :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="area">
        <span>{{row.booth}}</span>
        <span v-if="row.area">{{row.area}}平方米</span>
      </template>
        <template slot-scope="{ row }" slot="from_app">
        <span v-if="row.from_app=='import'">导入</span>
        <span v-if="row.from_app=='qrcode'">业务员二维码</span>
        <span v-if="row.from_app=='website'">网站</span>
        <span v-if="row.from_app=='miniapp'">小程序</span>
        <span v-if="row.from_app=='wechat'">公众号</span>
      </template>
      <template slot-scope="{ row }" slot="meetings" v-if="row.meetings!==''">
        <div
          style=" margin: 10px 5px;
            border: 1px solid #dddd;
            background-color: #fff;
            border-radius: 10px;
            padding: 5px 10px;
            font-size: 10px;"
          v-for="(item,index) in JSON.parse(row.meetings)"
          :key="index"
        >{{item.miceName}}</div>
      </template>

      <template slot-scope="{ row }" slot="status">
        <i-switch
          v-model="row.status"
          true-value="1"
          false-value="0"
          size="small"
          @on-change="change($event,row)"
        />
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isAdd" title="添加展商" width="1000">
      <Form
        ref="formData"
        :model="formData"
        :rules="formDataRule"
        inline
        :label-width="100"
        fullscreen
      >
        <FormItem prop="name" label="姓名：">
          <Input
            type="text"
            v-model.trim="formData.name"
            placeholder="Username"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="company" label="公司：">
          <Input type="text" v-model.trim="formData.company" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="mobile" label="手机：">
          <Input type="text" v-model.trim="formData.mobile" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="email" label="邮箱">
          <Input type="text" v-model.trim="formData.email" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="address" label="地址：">
          <Input type="text" v-model.trim="formData.address" style="width：300px"></Input>
        </FormItem>

        <FormItem prop="product" label="参展商品：">
          <Input type="text" v-model.trim="formData.product" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="need" label="需求采购商类别：">
          <Input type="text" v-model.trim="formData.need" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="booth" label="展位类型：">
          <Select
            v-model="formData.booth"
            clearable
            @on-change="checkStatus($event, 'booth','formData')"
          >
            <Option v-for="item in booths" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="area" label="展位面积：">
          <Input type="text" v-model.trim="formData.area" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="comments" label="留言：">
          <Input type="textarea" v-model.trim="formData.comments" style="width：300px"></Input>
        </FormItem>
        <FormItem label="展会名称：" prop="miceId">
          <Select
            v-model="formData.miceId"
            clearable
            @on-change="checkStatus($event, 'miceId','formData')"
          >
            <Option v-for="item in mices" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="会议列表" prop="meetings">
          <Select
            v-model="formData.meetings"
            clearable
            multiple
            @on-change="checkStatus($event, 'meetings','formData')"
          >
            <Option v-for="(item,index) in meets" :value="item.value" :key="index">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="业务员：" prop="sales">
          <Select
            v-model="formData.sales"
            clearable
            @on-change="checkStatus($event, 'sales','formData')"
          >
            <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok('formData')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  miceList,
  exhibitors,
  modifyExhibitor,
  exportExh,
  addExh
} from "../../api/exhibitors";
import { userList } from "../../api/account";
import { _ValidatePhone } from "@/assets/js/validate.js";
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      total: 0,
      loading: "",
      conditions: {
        status: "",
        miceId: "",
        sales: "",
        from_app:''
      },
      isAdd: false,
      mices: [],
      meets: [],
      userList: [],
      booths: [
        {
          value: "特装",
          label: "特装"
        },
        {
          value: "普通",
          label: "普通"
        }
      ],
      statusList: [
        {
          value: "1",
          label: "已沟通"
        },
        {
          value: "0",
          label: "未沟通"
        }
      ],
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center",
          minWidth: 60
        },
        {
          title: "姓名",
          key: "name",
          align: "center",
          minWidth: 120
        },
        {
          title: "手机号",
          key: "mobile",
          align: "center",
          minWidth: 120
        },
        {
          title: "邮箱",
          key: "email",
          align: "center",
          minWidth: 120
        },
        {
          title: "参展产品",
          key: "product",
          align: "center",
          minWidth: 80
        },
        {
          title: "需要采购商类别",
          key: "need",
          align: "center",
          minWidth: 80
        },
        {
          title: "公司",
          key: "company",
          align: "center",
          minWidth: 120
        },
        {
          title: "地址",
          key: "address",
          align: "center",
          minWidth: 150
        },
        {
          title: "会议列表",
          slot: "meetings",
          align: "center",
          minWidth: 250
        },
        {
          title: "拟预定展位",
          slot: "area",
          align: "center",
          minWidth: 150
        },
        {
          title: "留言",
          key: "comments",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
         {
          title: "数据渠道",
          slot: "from_app",
          align: "center",
          minWidth: 250,
          tooltip: true
        },
        {
          title: "邀请人",
          key: "sales_name",
          align: "center",
          minWidth: 150
        },
        {
          title: "沟通状态",
          slot: "status",
          align: "center",
          minWidth: 150
        }
      ],
      formData: {
        miceId: "",
        name: "",
        company: "",
        address: "",
        mobile: "",
        email: "",
        product: "",
        need: "",
        booth: "",
        area: "",
        comments: "",
        sales: "",
        meetings: []
      },
      formDataRule: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        mobile: [
          {
            required: true,
            validator: _ValidatePhone,
            trigger: "blur"
          }
        ],
        miceId: [{ required: true, message: "请选择展会", trigger: "change" }]
      },
      list: [],
      meetings:[],
      tableHeight: 100
    };
  },
  created() {
    this.getmiceList();
    this.getuserList();
    this.exhibitors();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    //添加展商
    addUser() {
      this.formData = {
        miceId: "",
        name: "",
        company: "",
        address: "",
        mobile: "",
        email: "",
        product: "",
        need: "",
        booth: "",
        area: "",
        comments: "",
        sales: "",
        meetings: []
      };
      this.isAdd = true;
    },
    cancel() {
      this.isAdd = false;
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        const {
          miceId,
          name,
          company,
          address,
          mobile,
          email,
          product,
          need,
          booth,
          area,
          comments,
          sales,
        } = this.formData;
        if (valid) {
          let meetings = JSON.stringify(this.meetings)
          addExh({
            miceId,
            name,
            company,
            address,
            mobile,
            email,
            product,
            need,
            booth,
            area,
            comments,
            sales,
            meetings
          }).then(res => {
            if (res.status) {
              console.log(res)
              this.isAdd = false;
              this.exhibitors();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        } else {
        }
      });
    },
    getMeet(parentId) {
      miceList({ page: 0, type: 1, parentId }).then(res => {
        if (res.status) {
          this.meets = res.data.list.map(e => {
            return {
              value: e.miceId,
              label: e.miceName
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    //展会列表
    getmiceList() {
      miceList({ page: 0, type: 0 }).then(res => {
        if (res.status) {
          console.log(res.data.list);
          this.mices = res.data.list.map(e => {
            return {
              value: e.miceId,
              label: e.miceName
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getuserList() {
      userList({ page: 0, all: true }).then(res => {
        if (res.status) {
          this.userList = res.data.list.map(e => {
            return {
              value: e.user_id,
              label: e.realname
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    exhibitors() {
      this.loading = true;
      const { page, pageSize } = this;
      const { status, miceId, sales } = this.conditions;
      exhibitors({ status, miceId, sales, page: page - 1, pageSize }).then(
        res => {
          if (res.status) {
            this.total = res.data.count;
            this.list = res.data.list;
            this.loading = false;
          } else {
            this.$Message.error(res.msg);
            this.loading = false;
          }
        }
      );
    },
    change(e, row) {
      this.$Modal.confirm({
        title: "警告",
        content: `确认要更新沟通状态？（打开默认沟通过）`,
        onOk: () => {
          modifyExhibitor({ id: row.id, status: e }).then(res => {
            if (res.status) {
              this.$Message.success("修改成功");
            } else {
              if (e == 1) {
                row.status = "0";
              } else {
                row.status = "1";
              }
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {
          if (e == 1) {
            row.status = "0";
          } else {
            row.status = "1";
          }
        }
      });
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.exhibitors();
    },
    checkStatus(e, name) {
      this.formData[name] = e;
      if (name == 'meetings') {
        this.meetings = this.formData.meetings.map(e => {
          return {
            miceId: e,
            miceName: this.meets.find(item => item.value == e).label
          };
        });
        console.log('this.meetings',this.meetings);
      }
      if (name == "miceId") {
        if (e) {
          this.getMeet(e);
        } else {
          this.meets = [];
        }
      }
    },
    search() {
      this.exhibitors();
    },
    handleReset() {
      this.conditions = {
        status: ""
      };
      this.page = 1;
      this.exhibitors();
    },
    changePage(e) {
      this.page = e;
      this.exhibitors();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.exhibitors();
    },
    // 导出
    exportData() {
      // const { status, sales, miceId } = this.conditions;
      // exportExh({status,sales,miceId}).then(res =>{
      //   if(res.status){
      //     console.log(res)
      //   }else{
      //     this.$Message.error(res.msg)
      //   }
      // })
      var url =
        this.exportHeader+"/a/exhibitor/export?accessToken=" +
        localStorage.getItem("token");
      let params = "";
      for (var key in this.conditions) {
        url += `&${key}=${this.conditions[key]}`;
      }
      var a = document.createElement("a");
      a.href = url;
      console.log(url);
      a.download = name;
      a.click();
      a.remove();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
